// server/server.ts
import express from "express";
import fs from "fs";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "@/client/components/App";

const server = express();
// 设置 Express 服务器的视图引擎为 ejs ,用于渲染动态的 HTML 页面
server.set("view engine", "ejs");
// 指定视图文件夹路径为当前模块目录下的views文件夹，存放EJS模板文件。
server.set("views", path.join(__dirname, "views"));
// 配置静态资源中间件，将static文件夹中的静态文件（如CSS、JavaScript、图片等）提供给客户端访问。
server.use("/", express.static(path.join(__dirname, "static")));

// 从static/manifest.json文件中同步读取内容，并以UTF-8编码解析为字符串。
const manifest = fs.readFileSync(
  path.join(__dirname, "static/manifest.json"),
  "utf-8"
);

// 将读取到的manifest.json字符串解析为JavaScript对象assets，通常包含前端构建后的资源映射信息。
const assets = JSON.parse(manifest);

//定义根路径/的GET请求处理函数，当客户端访问根路径时触发。
server.get("/", (req, res) => {
  // 使用ReactDOMServer.renderToString方法将React组件App渲染为HTML字符串。
  const component = ReactDOMServer.renderToString(React.createElement(App));

  //调用res.render方法，使用views文件夹中的client.ejs模板渲染页面。
  // 渲染时传递两个变量：assets（资产信息）和component（React组件渲染的HTML字符串）。
  res.render("client", { assets, component });
});

server.listen(3001, () => {
  console.log("Server running on http://localhost:3001");
});
